<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/bootstrap.css">
<title>朗读亭--背景音乐编辑</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<style>
.text-right {
	text-align: right;
}

tr {
	line-height: 10px;
	height: 25px;
}
</style>
</head>
<body>
	<div style="width:100%;margin-top:10px;">
		<div style="width:100%;margin-top:3px;">
			<form id="typeForm"  method="post" enctype="multiplf/form-data" >
			<input type="hidden" name="id" id="id" value="${music.id }" />
			<input type="hidden" name="music" id="music" value="${music.music }"/>
			<table style="width:100%;">
				<tr>
					<td class="text-right">标题：</td>
					<td><input type="text" name="title" id="title" value="${music.title }"/></td>
				</tr>
				<tr>
					<td class="text-right">上传音频：</td>
					<td>
						<input type="file" name="vedioFile" accept="vedio/*" onchange="changImg(event)"/>
					</td>
				</tr>
				<tr>
					<td class="text-right">分类：</td>
					<td><select name="musictype">
						<option value="1" <c:if test="${music.musictype=='1' }">selected</c:if>>民俗</option>
						<option value="2" <c:if test="${music.musictype=='2' }">selected</c:if>>摇滚</option>
						<option value="3" <c:if test="${music.musictype=='3' }">selected</c:if>>说唱</option>
						<option value="4" <c:if test="${music.musictype=='4' }">selected</c:if>>流行</option>
					</select></td>
				</tr>
				<tr>
					<td class="text-right">歌手：</td>
					<td><input type="text" name="singer" id="singer" value="${music.singer }"/></td>
				</tr>
				<tr>
					<td class="text-right">时长：</td>
					<td><input type="text" name="duration" id="duration" value="${music.duration }"/></td>
				</tr>
				<tr>
					<td class="text-right">音频展示：</td>
					<td>
						<audio src="${music.music }" controls="controls"></audio>
					</td>
				</tr>
				<tr>
					<td class="text-right">是否启用：</td>
					<td><input type="radio" name="isuse" value="1" <c:if test="${music.isuse!='0' }">checked</c:if>/>是
						<input type="radio" name="isuse" value="0" <c:if test="${music.isuse=='0' }">checked</c:if>/>否</td>
				</tr>
				<tr>
					<td class="text-right">排序：</td>
					<td><input type="text" name="order" id="order" value="${music.order_ }"/></td>
				</tr>
			</table>
			</form>
		</div>
		<div style="text-align: center;">
			<div style="margin-top:20px;">
				<a class="btn btn-success" onclick="saveType();" >保存</a>
			</div>
		</div>
	</div>
	<script src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript">
	var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
		function saveType(){
			var formData;
	  		formData = new FormData($('#typeForm')[0]);//这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数
			$.ajax({
				type : 'post',
				dataType : "json",
				processData : false,         // 告诉jQuery不要去处理发送的数据
		        contentType : false,        // 告诉jQuery不要去设置Content-Type请求头
				data : formData,
				url : "readtype/save_music",// 请求的action路径
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					layer.msg("请求失败！");
				},
				success : function(data) {
					if(data.state=="9003"){
						layer.msg("没有权限！");
						return ;
					}else if(data.state=="9002"){
						layer.msg("请重新登录！");
						top.location.reload();
						return ;
					}else if(data.state=="1"){
						parent.layer.close(index);
						parent.regetlist();
						layer.msg(data.message);
					}else{
						layer.msg(data.message);
					}
				}
			});	
		}
		function changImg(e){  
	        for (var i = 0; i < e.target.files.length; i++) {  
	            var file = e.target.files.item(i);  
	            if (!(/^image\/.*$/i.test(file.type))) {  
	                continue; //不是图片 就跳出这一次循环  
	            }  
	            //实例化FileReader API  
	            var freader = new FileReader();  
	            freader.readAsDataURL(file);  
	            freader.onload = function(e) {  
	                $("#myImg").attr("src",e.target.result);  
	            };
	        }  
	    }  
	</script>
</body>
</html>